<template>
	
		<el-container>
			<!-- 页面头部 -->
		  <el-header>
				<div class="headerLeft">
					<img src="../assets/img/heima.png" alt="">
					<span>电商后台管理系统</span>
				</div>
				
			  <el-button type="info" @click="logout">退出</el-button>
			</el-header>
		  <el-container>
				<!-- 页面左侧 -->
		    <el-aside :width="changeCollapse ?'64px' :'200px'">
					<div class="toggle-button" @click="toggleCollapse">|||</div>
					<el-menu
				:unique-opened="true"
				:collapse="changeCollapse"
				:collapse-transition="false"
      background-color="#373d41"
      text-color="#fff"
      active-text-color="#409eff"
			:router='true'
			:default-active="$route.path"
			>
			<!-- 一级菜单 -->
      <el-submenu :index="item.id+''" v-for="(item,index) in menulist" :key="item.id">
        <template slot="title">
          <i :class="iconObj[item.id]"></i>
          <span>{{item.authName}}</span>
        </template>
				<!-- 二级菜单 -->
				<el-menu-item :index="'/'+item1.path+''" v-for="item1 in item.children" :key="item1.id">
					<i class="el-icon-menu"></i>
					<span>{{item1.authName}}</span>
				</el-menu-item>
      </el-submenu>
    </el-menu></el-aside>
				<!-- 页面主体 -->
		    <el-main>
					<!-- 路由占位符 -->
					<router-view></router-view>
					<!-- <user></user> -->
				</el-main>
		  </el-container>
		</el-container>
	
</template>

<script>
	// import User from './User/users.vue'
	export default{
		components:{
			// User
		},
		data(){
			return{
				menulist:[],
				iconObj:{
					'125':'iconfont icon-user',
					'103':'iconfont icon-tijikongjian',
					'101':'iconfont icon-shangpin',
					'102':'iconfont icon-danju',
					'145':'iconfont icon-baobiao'
				},
				changeCollapse:false
			}
		},
		created() {
			this.getMenuList()
			
		},
		mounted() {
			// 取消浏览器鼠标移动时的默认事件
			document.querySelector('body').onmousemove=function(e){e.preventDefault()}
		},
		methods:{
			logout(){
				window.sessionStorage.clear()
				this.$router.push('/login')
			},
			//获取所有的菜单
			async getMenuList(){
				// 获取get请求中的menu的data
			const {data:res}=await this.$http.get('menus')
			//如果请求失败则以弹窗的形式发出错误
			if(res.meta.status!=200) return this.$message.error(res.meta.msg)
			this.menulist=res.data
			console.log(res)
			},
			//点击按钮 让侧边栏折叠与展开
			toggleCollapse(){
				this.changeCollapse=!this.changeCollapse
			}
		}
	}
</script>

<style scoped="scoped" lang="less">
	.el-container{
		width: 100%;
		height: 100%;
		
	}
.el-icon-location{
	color: #fff;
}
	.el-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: ghostwhite;
	  background-color: #373d41;
	  ine-height: 60px;
		color: white;
		font-size: 18px;
 }
	.headerLeft img{
	   height: 60px;
		 margin-right: 20px;
	} 
	.headerLeft{
		display: flex;
		align-items: center;
		
		}
	  .el-aside {
	    background-color: #373d41;
	    color: #333;
	    text-align: left;
	    line-height: 200px;
			.el-menu{
				border-right: none;
			}
	  }
	  
	  .el-main {
	    background-color: #E9EEF3;
	    color: #333;
	    text-align: center;
	    line-height: 160px;
	  }
	  
	  body > .el-container {
	    margin-bottom: 40px;
	  }
	  
	  .el-container:nth-child(5) .el-aside,
	  .el-container:nth-child(6) .el-aside {
	    line-height: 260px;
	  }
	  
	  .el-container:nth-child(7) .el-aside {
	    line-height: 320px;
	  }
	.iconfont{
		padding-right: 5px;
		font-size: 16px
	}
	.toggle-button{
		background-color: #4A5064;
		font-size: 10px;
		line-height: 24px;
		color: white;
		text-align: center;
		letter-spacing: 0.2em;
		cursor: pointer;
	}
</style>
